<template>
	<view class="auth_box">
		<!-- 审核中 -->
		<view class="shenhe" v-if="masterStatus==30005 || masterStatus==30006 || masterStatus==30007">
			<view class="stats_box" v-if="masterStatus == 30005 ">
				<view class="loading_box" style="padding-top: 30%; text-align: center;">
					<text class="iconfont icon-shenhe" style="font-size: 300rpx; color: #007AFF;" ></text>
					<view style="padding: 20rpx 0; color: #007AFF;">正在审核中, 预计3个工作日内审核完成!</view>
				</view>
				<van-button type="primary" @click="goIndex">去首页看看</van-button>
			</view>
			<view class="stats_box" v-if="masterStatus == 30006">
				<view class="loading_box">
					<van-loading type="spinner" color="#1989fa">未通过审核,原因<text style="color: #007AFF;">{{ shenheInfo }}</text></van-loading>
					<view class="txt_container">
						<text style="text-align: center;">请重新提交资料</text>
					</view>
				</view>
				<!-- <van-button type="primary" @click="reSub">重新审核</van-button> -->
			</view>
			<view class="stats_box" v-if="masterStatus == 30007 ">
				<view class="loading_box" style="padding-top: 30%; text-align: center;">
					<text class="iconfont icon-tongguo" style="font-size: 300rpx; color: #007AFF;" ></text>
					<view style="padding: 20rpx 0; color: #007AFF;">已通过审核,无需重复申请!</view>
				</view>
				<van-button type="primary" @click="goIndex">去首页看看</van-button>
			</view>
			
		</view>
		<view class="authen" v-if="masterStatus == 30009 || masterStatus == 30006">
			<van-tabs type="card"  @change="tabChange">
			  <van-tab title="技工入住"  >
				  <!-- 类型选择 -->
				  <van-radio-group :value="type" @change="onChange" class="chose">
					<van-radio name="4">个人入住</van-radio>
					<van-radio name="5">商家入住</van-radio>
				  </van-radio-group>
				  <!-- 详细信息 -->
				  <view class="user_info">				
						<van-field
							:value="userInfo.nativenative"
							
							center
							disabled
							clearable
							label="服务区域"
							placeholder="请选择服务区域"
							:border="border"
							
							use-button-slot
						  >
							<van-button slot="button" size="small" type="primary" @click="getLocaltion">选择区域</van-button>
						  </van-field>
						  <van-field
							  :value="userInfo.location"
							  placeholder="请输入商家位置"
							  :border="border"
							   label="商家位置"
							   @change="addChange"
							  
							/>
							
							<van-field
														  :value="userInfo.companyname"
														  placeholder="请输入商家名称"
														  :border="border"
														   label="商家名称"
														   @change="compnameChange"
														  
														/>
														
							<van-field
								:value="userInfo.introduce"
								v-if="type == 5"
								placeholder="请输入商家介绍"
								:border="border"
								label="商家介绍"
								@change="infoChange"
														  
							/>
							
							
						  <van-field
							  :value="itemName"
							  placeholder="请输入服务项目"
							  :border="border"
							  disabled
								@change="itemChange"
								label="服务项目"
							  use-button-slot
							>
							<van-button slot="button" size="small" type="primary" @click="itemShow = true">选择项目</van-button>
							</van-field>
						  <van-field
							  :value="userInfo.name"
							  placeholder="请输入真实姓名"
							  :border="border"
							  @change="nameChange"
								:label="type == 4? '真实姓名': '法人姓名'"
							  
							/>
							<van-field
								:value="userInfo.identity"
								placeholder="请输入身份证号"
								:border="border"
								type="idcard"
								@change="idChane"
								maxlength="18"
								:label="type == 4? '身份证号':'法人证件'"
								
							  />
							  <!-- sfz -->
							 <view class="sfz">
								<text class="sfztitle">请上传身份证正反面</text>
								<view class="z_box">
									<view class="zheng item" @click="chooseimage('1')">
										<image src="../../static/icon/zheng.png" v-if="!userInfo.front" class="ico" mode=""></image>
										<image :src="userInfo.front" v-if="userInfo.front" class="sfzimg" mode=""></image>
									</view>
									<view class="fan item" @click="chooseimage('2')">
										<image src="../../static/icon/fan.png" v-if="!userInfo.contrary"  class="ico"  mode=""></image>
										<image :src="userInfo.contrary" v-if="userInfo.contrary" class="sfzimg" mode=""></image>
									</view>
								</view>
							 </view>
							 
							  <!-- 上传营业执照 -->
							  <view class="comp" v-if="type == 5" @click="chooseimage('3')">
								<view class="sfz">请上传营业执照</view>
								<text v-if="!userInfo.business" class="zhizhao iconfont icon-yingyezhizhao"></text>
								<image :src="userInfo.business" class="zzimg" v-if="userInfo.business" mode="" ></image>
							  </view>
							  <!-- 店铺logo -->
							  <view class="comp" v-if="type == 5" @click="chooseimage('5')">
							  								<view class="sfz">请上传店铺logo</view>
							  								<text v-if="!userInfo.logo" class="zhizhao iconfont icon-yingyezhizhao"></text>
							  								<image :src="userInfo.logo" class="zzimg" v-if="userInfo.logo" mode="" ></image>
							  </view>
							  
							  <!-- 商家图片 -->
							  <view class="comp" v-if="type == 5" @click="chooseimage('4')">
							  		<view class="sfz">请上传店铺图片</view>
							  			<text v-if="!userInfo.interior" class="zhizhao iconfont icon-yingyezhizhao"></text>
							  		<view class="imglist" v-if="userInfo.interior" style="width: 100%;box-sizing: border-box;display: flex;align-items: center;justify-content: space-around;">
							  			<image :src="item" v-for="(item, index) in shopImg" :key="index"  class="shopimg"  mode="" ></image>
							  		</view>
							  </view>
							  
							  <!-- btn -->
							  <view class="btn_box" v-if="type == 4" style="width: 100%;padding: 20rpx;box-sizing: border-box;">
							  	<button  @click="choseVideo">面部识别</button>
							  </view>
							  <view class="btn_box" style="width: 100%;padding:  20rpx;box-sizing: border-box;">
							  	<button type="primary"  @click="subData">确定</button>
							  </view>
				  </view>
			  </van-tab>
			  <van-tab title="实名认证" v-if="auth == 2">
				 
					<!-- <van-field
						:value="userInfo.name"
						placeholder="请输入推荐人姓名"
						:border="border"
					  @change="tjChange"
						label="推荐人"
						
					  /> -->
					  <van-field
						  :value="userInfo.name"
						  placeholder="请输入真实姓名"
						  :border="border"
						@change="nameChange"
						label="真实姓名"
						  
						/>
					<van-field
						:value="userInfo.identity"
						placeholder="请输入身份证号"
						:border="border"
						type="idcard"
						@change="idChane"
						maxlength="18"
						label="身份证号"
						
					  />
					  <!-- sfz -->
					 <view class="sfz">
						<text class="sfztitle">请上传身份证正反面</text>
						<view class="z_box">
							<view class="zheng item" @click="chooseimage('1')">
								<image src="../../static/icon/zheng.png" v-if="!userInfo.front" class="ico" mode=""></image>
								<image :src="userInfo.front" v-if="userInfo.front" class="sfzimg" mode=""></image>
							</view>
							<view class="fan item" @click="chooseimage('2')">
								<image src="../../static/icon/fan.png" v-if="!userInfo.contrary"  class="ico"  mode=""></image>
								<image :src="userInfo.contrary" v-if="userInfo.contrary" class="sfzimg" mode=""></image>
							</view>
						</view>
					 </view>
					 <button type="primary" @click="subck" >注册</button>
			  </van-tab>
			  
			</van-tabs>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>
		</view>
		
		<!-- item -->
		<view class="item_list">
			<van-picker
			  show-toolbar
			  title="选择类目"
			  v-if="itemShow"
			  :columns="options"
			  @cancel="itemCancel"
			  @confirm="itemConfirm"
			/>
		</view>
		
	</view>
</template>

<script>
	import simpleAddress from "@/components/simple-address/simple-address.nvue"
	export default {
		data() {
			return {
				type: "4",
				active: 0,
				auth:"",
				zhizhao: "",
				status: "",
				zheng: "",
				fan: "",
				start: false,
				border: false,
				fileList: [],
				mutiple: true,
				shopImg: [],
				userInfo: {
					name: "",
					identity: "",
					address: "",
					items: "",
					front: "",
					nativenative:"",
					contrary: "",
					business:"",
					introduce: "",
					logo: "",
					interior: "",
					location: "",
				},
				slt: {
					business: "",
					front: "",
					contrary: "",
				},
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				map:{
					// latitude: "",
					// longitude: "",
				},
				vedioSrc: "",
				imageSrc: "",
				cameraData: {
					width: "",
					height: ""
				},
				ctx: "",
				onStart: false,
				itemName: "",
				itemShow: false,
				masterStatus: "",
				shenheInfo: "",
				userid: "",
				width: "",
				height: "",
				province: "",
				city: "",
				county: "",
			}
		},
		components: {
			simpleAddress
		},
		computed: {
			token() {
				return this.$store.state.token
			},
			hasVideo() {
				return this.$store.state.msgVideo 
			},
			readySub() {
				let {name, identity,front,contrary,nativenative,address, items,business} = this.userInfo
				let src = this.vedioSrc
				if(this.type == 4) {
					if(name && identity && front && contrary && nativenative && address && items && src) {
						return false
					} else {
						return true
					}
				} else {
					if(name && identity && front && contrary && nativenative && address && items && business) {
						return false
					} else {
						return true
					}
				}
			},
			navbar() {
				return this.$store.state.navbar;
			},
			// 选择项目
			options() {
				let arr = []
				this.navbar.forEach( el => {
					arr.push({
						text:el.name,
						id: el.id
					})
				})
				return arr
			},
		},
		watch:{
			auth() {
				if(this.auth == 1) {
					uni.setNavigationBarTitle({
						title:"商家入住"
					})
				} else {
					uni.setNavigationBarTitle({
						title:"实名认证"
					})
				}
			}
		},
		onReady() {
			this.getStatus()
		},
		onLoad( e ) {
			//console.log(e);
			// this.auth = e.user
		},
		onShow() {
			this.getAuth()
			this.getMasterStatus()
		},
		methods: {
			// 获取审核状态
			async getMasterStatus() {
				let res = await this.$Request("POST", "/Index/masterstatus", { token: this.token })
			    // console.log(res);
				this.masterStatus = res.data.code
				if(this.masterStatus == 30006) {
					this.userid = res.data.data.id
					this.shenheInfo = res.data.data.explain
				} 
			},
			// 去首页
			goIndex() {
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			reSub() {
				this.masterStatus = 30009
			},
			// item
			itemCancel() {
				this.itemShow = false
			},
			itemConfirm(e) {
				console.log(e);
				this.itemName = e.detail.value.text
				this.userInfo.items = e.detail.value.id
				this.itemShow = false
			},
			
			
			
			  // 录制视频
			  
			  choseVideo() {
					let self = this
				  uni.chooseVideo({
				  	sourceType:["camera"],
					maxDuration: 10,
					camera:"front",
					compressed: false,
					success( res ) {
						console.log(res);
						uni.uploadFile({
							url: `${self.$Request_Url}/Index/picload`,
							filePath:res.tempFilePath,
							name: "name",
							success( ret ) {
								let datas = JSON.parse(ret.data)
								self.vedioSrc = datas.data
								self.$store.commit("getMsgVideo", self.vedioSrc)
							}
						})
					}
				  })
			  },
			
			// 状态检测
			getStatus() {
				let token = this.token
				let self = this
				uni.request({
					url:`${self.$Request_Url}/Index/masterstatus`,
					method:"POST",
					data: {
						token
					},
					success( res ) {
						self.status = res.data.code
					}
				})
			},
			// 定位
			getLocaltion() {
				let self = this
				uni.getLocation({
					type:"gcj02",
					success(res) {
						// console.log(res);
						self.width = res.latitude
						self.height = res.longitude
						self.map = res
						uni.openLocation({
							latitude:res.latitude,
							longitude: res.longitude,
							success(ret) {
								uni.chooseLocation({
									success( val ) {
										// console.log(val);
										self.userInfo.nativenative = `${val.name} `
										
										self.getProvice(self.width, self.height)
									}
								})
							}
						})
					}
				})
			} ,
			
			// 获取省市县
			getProvice(width, height) {
				let self = this
				uni.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${width},${height}&key=${self.$apikey}`,
					data: {},
					success:( city ) => {
						  console.log(city);
						 self.province = city.data.result.ad_info.province
						 self.city = city.data.result.ad_info.city
						 self.county = city.data.result.ad_info.district
					},
				})
			},
			
			// 拍照
			chooseWxImage: function(type, val) {
			    var that = this;
				let count = ""
				if(val == 4) {
					count = 3
				} else {
					count = 1
				}
			    wx.chooseImage({
			      sizeType: ['original', 'compressed'],
			      sourceType: [type],
				  count,
			      success: function(res) {
			        console.log(res);
			        if(val == 1) {
						that.userInfo.front = res.tempFilePaths[0]
						that.uploadImg(that.userInfo.front, "front")
					} else if( val == 2) {
						that.userInfo.contrary = res.tempFilePaths[0]
						that.uploadImg(that.userInfo.contrary, "contrary")
					} else if( val == 5) {
						uni.uploadFile({
							url: `${that.$Request_Url}/Index/picload`,
							filePath:res.tempFilePaths[0],
							name: "name",
							success( ret ) {
								let rel = JSON.parse(ret.data)
								// console.log(rel);
								that.userInfo.logo = rel.data
							}
						})
					} else if( val == 4) {
						that.shopImg = res.tempFilePaths
						for(let i = 0; i < that.shopImg.length; i++) {
							uni.uploadFile({
								url: `${that.$Request_Url}/Index/picload`,
								filePath:that.shopImg[i],
								name: "name",
								success( ret ) {
									let rel = JSON.parse(ret.data)
									//console.log(rel);
									that.userInfo.interior += rel.data
								}
							})
						}
						
					} else {
						that.userInfo.business = res.tempFilePaths[0]
						that.uploadImg(that.userInfo.business, "business")
					}
			      }
			    })
			  },
			  // 图片上传
			  uploadImg( filePath, key ) {
				  let self = this
				  uni.uploadFile({
					  url: `${self.$Request_Url}/Index/picload`,
					  filePath:filePath,
					  name: "name",
					  success( res ) {
						let ret = JSON.parse(res.data)
					  	console.log(ret);
						self.slt[key] = ret.data
					  },
					  fail(err) {
						  console.log(err);
					  }
				  })
			  },
			 // 拍照还是手动选着
			  chooseimage: function( val ) {
			    var that = this;
			    wx.showActionSheet({
			      itemList: ['从相册中选择', '拍照'],
			      itemColor: "#007AFF", 
			      success: function(res) {
			        if (!res.cancel) {
			          if (res.tapIndex == 0) {
			            that.chooseWxImage('album', val)
			          } else if (res.tapIndex == 1) {
			            that.chooseWxImage('camera', val)
			          }
			        }
			      }
			    })
				},
				// 11
				nameChange( e ) {
					//console.log(e);
					this.userInfo.name = e.detail
				},
				idChane( e ) {
					this.userInfo.identity = e.detail
				},
				compnameChange(e) {
					this.userInfo.companyname = e.detail
				},
				addChange(e) {
					this.userInfo.location  = e.detail
				},
				itemChange( e ) {
					this.userInfo.items = e.detail
				},
				infoChange(e) {
					this.userInfo.introduce = e.detail
				},
				tjChange(e) {
					this.userInfo.tj = e.detail
				},
				tabChange( e ) {
					console.log(e.mp.detail.name);
					this.userInfo = {}
					console.log(this.active);
				},
				// 创客
				subck() {
					let {  name, identity, front, contrary } = this.userInfo
					let data = {
						
						name,
						identity,
						front,
						contrary
					}
					let self = this
					if(name && identity && front && contrary) {
						uni.request({
							url: `${self.$Request_Url}/Index/authentication`,
							data: data,
							success( res ) {
								console.log(res);
							}
						})
					}
				},
				// 上传资料
				async subData() {
					let self = this
					let data = {}
					
						if(self.type == 4) {
							data = {
								type:self.type,
								token: self.token,
								name: self.userInfo.name,
								identity: self.userInfo.identity,
								front: self.slt.front,
								contrary: self.slt.contrary,
								address: self.userInfo.location,
								location: self.userInfo.location,
								items: self.userInfo.items,
								video: self.vedioSrc,
								province: self.province,
								city: self.city,
								county: self.county
							}
							
						} else {
							data = {
								type:self.type,
								token: self.token,
								name: self.userInfo.name,
								identity: self.userInfo.identity,
								front: self.slt.front,
								contrary: self.slt.contrary,
								business: self.slt.business,
								companyname: self.userInfo.companyname,
								location: self.userInfo.location,
								items: self.userInfo.items,
								introduce:self.userInfo.introduce,
								logo: self.userInfo.logo,
								interior : self.userInfo.interior,
								id: self.userid ? self.userid : "",
								province: self.province,
								city: self.city,
								county: self.county
							}
						};
						 // console.log(data);
						uni.request({
							url: `${self.$Request_Url}/Index/master`,
							data: data,
							method:"POST",
							success( res ) {
								 console.log(res);
								if(res.data.code == 202) {
									self.userInfo = {}
									self.slt = {}
									uni.showToast({
										title: "申请成功",
										icon: "success"
									})
									self.getMasterStatus()
								}
							},
						})
					
					
				},
				
				// 视频权限
				getAuth() {
					uni.getSetting({
						success(res) {
							// console.log(res.authSetting['scope.camera']);
							let isrecode = res.authSetting['scope.camera']
							if(!isrecode) {
								uni.authorize({
									scope:"scope.camera",
									success(val) {
										console.log("已获取视频权限");
									},
								})
							}
						},
					})
				},
			// type变化
			onChange(e) {
				//console.log(e);
				this.type = e.detail
				console.log(this.type);
			},
			openAddres() {
			   this.$refs.simpleAddress.open();
			},
			chose() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				//console.log(e);
			    this.userInfo.nativenative = e.label
				//console.log(this.userInfo.address);
			},
			// 检测手机号
			isPhone() {
				let  reg = /^1[356789]\d{9}$/
				let res = reg.test(this.userInfo.phone)
				if(!res) {
					uni.showToast({
						title:"手机格式不正确",
						icon: "loading"
					})
					this.userInfo.phone = ""
				}
			},
			// 上船前效验
			beforeRead(event) {
				//console.log(event.detail.file);
				this.fileList.push(event.detail.file)
			      const { file, callback } = event.detail;
			      callback(file.type === 'image');
			},
			beforeShopRead(event) {
				this.shopImg.push(event.detail.file)
				  const { file, callback } = event.detail;
				  callback(file.type === 'image');
			},
			// 准备上传
			afterRead( event ) {
				console.log("2" + event.detail);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopimg {
		width: 200rpx;
		height: 200rpx;
	}
	.authen {
		width: 100%;
		box-sizing: border-box;
		.chose {
			width: 100%;
			display: flex;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			justify-content: space-around;
		}
		
		.comp {
			width: 100%;
			// background-color: #f2f2f2;
			text-align: center;
			padding: 30rpx;
			box-sizing: border-box;
			.zhizhao {
				font-size: 300rpx;
				border: 1px solid #007aff;
			}
			.zzimg {
				width: 260rpx;
				height: 260rpx;
			}
			
		}
		.sfz {
			width: 100%;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			text-align: center;
			.sfztitle {
				width: 100%;
				text-align: center;
			}
			.z_box {
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding-top: 30rpx;
				.item {
					width: 200rpx;
					height: 160rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.ico {
						width: 128rpx;
						height: 88rpx;
					}
					.sfzimg {
						width: 200rpx;
						height: 160rpx;
					}
				}
			}
		}
	}
	.shenhe {
		width: 100%;
		padding: 20rpx 0;
		text-align: center;
	}
	cover-image,video {
	  margin-top:100%;
	  position: absolute;
	  width: 200rpx;
	  height: 200rpx;
	}
	#btn-photo-video{
	  /* position: absolute; */
	  margin-top:100%;
	  width: 242rpx;
	  left: 2%;
	}
	.item_list {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
<style>
	.van-tabs__scroll--card {
		margin: 0 !important;
	}
</style>
